// 引入 common.less 文件
@import "common";
@baseFont: 50;
// 打开APP模块 start
.app {
    position: relative;
    width: 15rem;
    // 21年的less计算要加括号
    height: (90rem / @baseFont);
    img {
        width: (750rem / @baseFont);
        height: (90rem / @baseFont);
    }
    .close {
        display: block;
        position: absolute;
        top: (27rem / @baseFont);
        left: (24rem / @baseFont);
        width: (30rem / @baseFont);
        height: (30rem / @baseFont);
        background: url(../images/head-close.png) no-repeat;
        background-size: (30rem / @baseFont) (30rem / @baseFont);
        cursor: pointer;
    }
    .open {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: (190rem / @baseFont);
        height: (90rem / @baseFont);
        background-color: #FE4101;
        font-size: (27rem / @baseFont);
        line-height: (90rem / @baseFont);
        text-align: center;
        color: #fff;
    }
}
// 打开APP模块 end
// 头部搜索模块 start
header {
    width: 15rem;
    height: (180rem / @baseFont);
    background-color: #FFDB47;
    .header {
        display: flex;
        width: (682rem / @baseFont);
        height: (88rem / @baseFont);
        margin: 0 (34rem / @baseFont);
        .classify {
            display: block;
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
            margin-top: (15rem / @baseFont);
            img {
                width: (36rem / @baseFont);
                height: (60rem / @baseFont);
            }
        }
        .login {
            display: block;
            width: (36rem / @baseFont);
            height: (60rem / @baseFont);
            margin-top: (15rem / @baseFont);
            img {
                width: (36rem / @baseFont);
                height: (60rem / @baseFont);
            }
        }
        .focuson {
            flex: 1;
            height: (88rem / @baseFont);
            text-align: center;
            img {
                width: (390rem / @baseFont);
                height: (76rem / @baseFont);
                margin-top: (10rem / @baseFont);
            }
        }
    }
    .search {
        position: relative;
        width: 15rem;
        height: (92rem / @baseFont);
        input {
            width: (702rem / @baseFont);
            height: (64rem / @baseFont);
            border-radius: (32rem / @baseFont);
            margin: (12rem / @baseFont) (24rem / @baseFont);
            border: 0;
            outline: none;
            font-size: (30rem / @baseFont);
            padding-left: (65rem / @baseFont);
        }
        &::before {
            content: '';
            display: block;
            position: absolute;
            top: (25rem / @baseFont);
            left: (40rem / @baseFont);
            width: (36rem / @baseFont);
            height: (36rem / @baseFont);
            background: url(../images/search.png) no-repeat;
            background-size: (36rem / @baseFont) (36rem / @baseFont);
        }
    }
}
// 头部搜索模块 end
// banner start
.banner {
    width: 15rem;
    height: (229rem / @baseFont);
    background: url(../images/banner-bg.png) no-repeat;
    background-size: 15rem (229rem / @baseFont);
    .focus {
        position: relative;
        width: (702rem / @baseFont);
        height: (229rem / @baseFont);
        margin: 0 (24rem / @baseFont);
        border-radius: (30rem / @baseFont);  // 下边沿的两个圆角显示不全？？？
        font-size: 0;  // 应该是字体大小产生的行高上下空白边沿的问题!
        overflow: hidden;
        ul {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 700%;
            margin-left: -100%;
            li {
                float: left;
                width: (702rem / @baseFont);
            }
            li a img {
                width: 100%;
            }
        }
        ol {
            position: absolute;
            left: (75rem / @baseFont);
            bottom: (10rem / @baseFont);
            font-size: 0;  // html 的字体大小影响 ol 的整体高度
            li {
                display: inline-block;
                width: (10rem / @baseFont);
                height: (10rem / @baseFont);
                background-color: #636365;
                border-radius: (5rem / @baseFont);
                margin: 0 (5rem / @baseFont);
                transition: all .3s;
            }
            .current {
                width: (20rem / @baseFont);
                background-color: #fff;
            }
        }
    }
}
// banner end
// nav start
.nav {
    width: 15rem;
    height: (320rem / @baseFont);
    background-color: #F4F4F4;
    a {
        display: flex;
        float: left;
        width: (150rem / @baseFont);
        height: (142rem / @baseFont);
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        img {
            width: (84rem / @baseFont);
            height: (84rem / @baseFont);
        }
        span {
            font-size: (22rem / @baseFont);
            color: #666;
        }
    }
}
// nav end
// 一元购模块 start
.oneyuan {
    width: 15rem;
    height: (234rem / @baseFont);
    img {
        float: left;
        height: (234rem / @baseFont);
    }
    img:last-child {
        margin-left: (2rem / @baseFont);
    }
}
// 一元购模块 end
// 返回顶部
body {
    height: (3000rem / @baseFont);
}
.goBack {
    display: none;
    position: fixed;
    right: (15rem / @baseFont);
    bottom: (185rem / @baseFont);
    width: (100rem / @baseFont);
    height: (100rem / @baseFont);
    background: url(../images/goback.png) no-repeat;
    background-size: (100rem / @baseFont) (100rem / @baseFont);
}